<template>
    <div class="page_list">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{ $t('common.balanceAlertSet') }}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                    <el-col :span="5">
                        <el-form-item prop="company"><!--公司名称-->
                            <el-select v-model="form.company" :placeholder="$t('system.companyName')" clearable style="width: 100%;">
                                <el-option v-for="company in companyList" :key="company.id" :value="company.name" :label="company.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="domain"><!--用户名称-->
                            <el-select v-model="form.domain" :placeholder="$t('common.userName_')" clearable style="width: 100%;">
                                <el-option v-for="item in domainList" :key="item.id" :value="item.domain" :label="item.domain"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                        <el-button type="primary" @click="openSettlementCenter">{{ $t('authority.back') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 99%;" :max-height="tableMaxHeight" :highlight-current-row="true">
                        <el-table-column :label="$t('system.companyName')" prop="company" min-width="150"></el-table-column><!--公司名称-->
                        <el-table-column :label="$t('common.userName_')" prop="domain" min-width="150"></el-table-column><!--用户名称-->
                        <el-table-column :label="$t('common.alertBalance')" prop="earlyWarningBalance" min-width="150"><!--预警余额-->
                            <template slot-scope="{ row }">{{ row.earlyWarningBalance | formatCurrency }}</template>  
                        </el-table-column>
                        <el-table-column :label="$t('common.status')" prop="earlyWarningStatus" min-width="150">
                            <template slot-scope="{ row }">
                                <el-switch v-model="row.earlyWarningStatus" :active-value="1" :inactive-value="0" disabled></el-switch>
                            </template>
                        </el-table-column><!--状态-->
                        <el-table-column :label="$t('common.inbox')" prop="receiptEmail" min-width="150"></el-table-column><!--收件邮箱-->
                        <el-table-column :label="$t('common.emailSubject')" prop="subject" min-width="150" :show-overflow-tooltip="true"></el-table-column><!--邮件主题-->
                        <el-table-column :label="$t('common.sendContent')" prop="sendMessage" min-width="150" :show-overflow-tooltip="true"></el-table-column><!--发送内容-->
                        <el-table-column :label="$t('common.operation')" width="180">
                            <template slot-scope="{ row }">
                                <el-button type="primary" size="small" @click="showModifyDialog(row)">{{ $t('operation.modify') }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div>
            </div>
        </div>

        <!--修改弹框-->
        <alert-dialog :title="$t('operation.modify')" :visible.sync="modifyDialog" width="416px" :dialogPosition="'center'">
            <el-form ref="modifyForm" :model="modifyForm" :rules="modifyFormRules" label-width="130px">   
                <el-form-item :label="$t('common.status')" prop="earlyWarningStatus"> <!--状态-->
                    <el-switch v-model="modifyForm.earlyWarningStatus" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item :label="$t('common.alertBalance')" prop="earlyWarningBalance"><!--预警余额-->
                    <el-input v-model="modifyForm.earlyWarningBalance" type="text" :placeholder="$t('verify.plsInput')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('common.inbox')" prop="receiptEmail"><!--收件邮箱-->
                    <el-input v-model="modifyForm.receiptEmail" type="text" :placeholder="$t('verify.plsInput')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('common.emailSubject')" prop="subject"><!--邮件主题-->
                    <el-input type="textarea" v-model="modifyForm.subject" :placeholder="$t('verify.plsInput')" :maxlength="100" :rows="2"></el-input>
                </el-form-item>
                <el-form-item :label="$t('common.sendContent')" prop="sendMessage"><!--发送内容-->
                    <el-input type="textarea" v-model="modifyForm.sendMessage" :placeholder="$t('verify.plsInput')" :maxlength="400" :rows="4"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="goModify" type="primary">{{ $t('common.submit') }}</el-button>
                <el-button @click="modifyDialog = false" type="default">{{ $t('common.cancel') }}</el-button>
            </div>
        </alert-dialog>
    </div>
</template>

<script>
    import mixin from '@/service/mixin';
    import Pagination from '@/components/pagination';
    import AlertDialog from '@/components/alert-dialog';

    let that = null;
    export default {
        name: 'collection-data',
        components: {
            Pagination,
            AlertDialog
        },
        mixins: [mixin],
        props: {
            companyList: {
                type: Array,
                default: []
            },
            domainList: {
                type: Array,
                default: []
            },
        },
        data() {
            const checkAlertBalance = (rule, value, callback) => {
                if (Number(value) > 100000000) {
                    return callback(new Error(this.$t('common.alertBalanceRules')));/*预警余额不能大于100000000*/
                }
                if (Number(value) < -100000000) {
                    return callback(new Error(this.$t('common.alertBalanceRules2')));/*预警余额不能小于-100000000*/
                }
                callback();
            };
            return {
                userInfo: this.$storage.get('user'),
                form: {
                    company: '',
                    domain: '',
                },
                rules: {},
                modifyDialog: false,
                modifyForm:{
                    id: '',
                    earlyWarningStatus: '',
                    earlyWarningBalance: '',
                    receiptEmail: '',
                    subject: '',
                    sendMessage: '',
                },
                modifyFormRules:{
                    earlyWarningBalance: [
                        {required: true, message: this.$t('verify.plsInput'), trigger: 'blur'},
                        {pattern: /(?:^[-]?[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0){1}$)|(?:^[-]?[0-9]\.[0-9](?:[0-9])?$)/, message: this.$t('common.plsInputTrueAmount'), trigger: 'blur'},
                        {validator: checkAlertBalance, trigger: 'blur'}
                    ],
                    receiptEmail: [
                        {required: true, message: this.$t('verify.plsInput'), trigger: 'blur'},
                        {pattern: /^((([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6}\;))*(([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})))$/, message: this.$t('common.plsInputTrueEmail'), trigger: 'blur'}
                    ],
                    subject: [
                        {required: true, message: this.$t('verify.plsInput'), trigger: 'blur'},
                    ],
                    sendMessage: [
                        {required: true, message: this.$t('verify.plsInput'), trigger: 'blur'},
                    ]
                },
            };
        },
        methods: {
             // 获取列表数据
            getTableData(page = this.page) {
                const params = this.fillParams(page);
                this.$api.report.queryearlywarningconfigpage(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.resultData || [];
                        this.setPage(data.page, this.page);
                    }
                    this.tableMaxHeight = document.body.clientHeight - 210;
                });
            },
            // 搜索列表数据
            search() {
                this.page.currentPage = 1;
                this.getTableData();
            },
            // 配置查询和导出参数
            fillParams(page = this.page) {
                const form = this.form;
                const params = {
                    company: form.company,
                    domain: form.domain,
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                Object.keys(form).forEach(key => {
                    if (typeof form[key] === 'string' && form[key]) {
                        form[key] = form[key].trim();
                        params[key] = form[key];
                    }
                });
                return params;
            },
            showModifyDialog(row) {
                this.modifyForm = Object.assign({},row)
                this.modifyDialog = true;
                this.$nextTick( () => {
                    this.$refs.modifyForm.clearValidate();
                });
            },
            goModify() {
                this.$refs.modifyForm.validate(val => {
                    if (val) {
                        const params = {
                            id: this.modifyForm.id,
                            earlyWarningBalance: this.modifyForm.earlyWarningBalance,
                            earlyWarningStatus: this.modifyForm.earlyWarningStatus,
                            receiptEmail: this.modifyForm.receiptEmail,
                            subject: this.modifyForm.subject,
                            sendMessage: this.modifyForm.sendMessage,
                            operatorId: this.userInfo.id,
                            operatorName: this.userInfo.username,
                        }
                        this.$api.report.updateearlywarningconfig(params).then(res => {
                            const {status, data, error} = res;
                            if ('1' === status && '00000000' === error) {
                                this.$message.success(this.$t('common.successfulOperation'));
                                this.getTableData();
                                this.modifyDialog = false;
                            }
                        });
                    }
                })
            },
            //返回结算中心页面
            openSettlementCenter() {
                this.$emit('updateActiveTab', 'settlementCenter');
            }
        },
        created() {
            that = this;
            this.getTableData();
        },
    };
</script>

<style lang="scss" scoped>
    .el-col {
        padding-left: 10px;
    }
    .el-table .cell, .el-table th > .cell {
        word-break: keep-all;
        word-wrap: break-word;
    }
    .el-tooltip__popper {
        max-width: 300px;
        word-break: break-all;
        background-color: #fff;
        box-shadow: 0px 0px 5px #ccc;
        color: #000;
    }
    .el-date-editor .el-range-separator {
        width: 35px;
    }
</style>
